let $menubar = (() => {
    let menus = [],//五个下拉菜单的DOM对象
        menuData,//所有菜单数据
        $bar = $('<div class="notepad-menubar"></div>');
    let active = -1;//下拉菜单是否展开，若展开的话为i，没有展开为0

    /*下拉菜单的展开 true：1 false：0
     * 
     * title: 文件 编辑 格式 查看 帮助
     *  i       0    1    2    3    4
     */

    //创建菜单标题
    let createMenuTitle = () => {
        let $titles = $('<ul class="menu-title"></ul>');

        for (let i = 0; i < menuData.length; i++) {
            let $title = $('<li class="title"></li>');
            $title.html(menuData[i].title)
            $title.attr('id', i);

            $titles.append($title);


            $title.click((e) => {
                // let a = e.target.id;
                // 获取点击title下标
                let a = $title.index();

                // -1全没有展开为-1,直接hide隐藏
                if (active == -1) {
                    menus[a].show();
                    active = a;
                } else if (active != a) {
                    menus[active].css({ display: 'none' });
                    menus[a].css({ display: 'inline-block' });
                    active = a;
                } else {
                    menus[active].css({ display: 'none' });
                    active = -1;
                }

                // 阻止捕获和冒泡阶段中当前事件的进一步传播。
                e.stopPropagation();
            })

            $title.hover((e) => {
                let a = $title.index();
                if (active == -1) {
                    console.log('没有展开')
                    menus.map(item => {
                        item.hide();
                    })
                }
                else if (active != a) {
                    menus[active]?.css({ display: 'none' });
                    menus[a]?.css({ display: 'inline-block' });
                    active = a;
                }

                // 阻止捕获和冒泡阶段中当前事件的进一步传播。
                e.stopPropagation();
            })
            // 记事本，菜单打开状态点击之后会关闭，body以及菜单
            $('body').click(() => {
                if (active !== -1) {
                    menus[active].hide();
                    active = -1;
                }
            })
            createMenus(i, $title);
        }
        $bar.append($titles);
    }

    //创建下拉菜单
    let createMenus = (i, $title) => {
        let $menus = $(`<ul class="menus" style="display: none;">`);
        let items = menuData[i].menuItems;
        menus.push($menus);

        for (let j = 0; j < items.length; j++) {
            // 创建hr
            if (items[j].title === 'hr') {
                let $hr = $('<li class="menu-hr"></li>');

                $menus.append($hr);
                continue;
            }

            // 禁用or启用
            if (items[j].enabled == false) {
                let $menu = $(`<li class="menu-item disabled"></li>`)
                $menu.html(items[j].title);
                $menu.attr('id', j)//创建下拉列表的序号
                $menus.append($menu);
                continue;
            }

            // 添加选中栏
            // if (items[j].checked == true) {
            //     let $checked = $(`<input type="checkbox" class="checked">${items[j].title}</input>`)

            //     $menus.append($checked);
            //     continue;
            // }

            let $menu = $('<li class="menu-item"></li>');
            $menu.attr('id', j)//创建下拉列表的序号
            $menu.html(items[j].title);

            // 添加快捷键
            if (items[j].shortcut !== '') {
                let $shortcut = $('<span class="shortcut"></span>');

                $shortcut.html(items[j].shortcut);
                $menu.append($shortcut)

            }

            //加入的部分：
            $menu.click((e) => {
                e.stopPropagation()

                let b = e.target.id;

                menus[i].css({ display: 'none' });
                active = -1;

                menuData[i].menuItems[b].handler();
            })

            $menus.append($menu)

        }
        $title.append($menus)

    }

    let show = (data) => {
        $('body').append($bar);//改body为传进来的参数?

        menuData = data;
        createMenuTitle();
    }

    return {
        show,
    }


})()
